<template>
    <div class="pt44">
        <div class="repayInfo">
            <div class="info-title"><img v-bind:src="this.$store.state.imagesUrl + 'jieduoshao_icon.png'"><span>还款金额(元)</span></div>
            <div class="b-bottom info-num">
                <p>{{repayMoney}}</p>
            </div>
        </div>
        <div class="repayInfo">
            <div class="info-title"><img v-bind:src="this.$store.state.imagesUrl + 'huankuanriqi_icon.png'"><span>借款时长(天)</span></div>
            <div class="b-bottom info-num">
                <p>{{londDays}} 天</p>
            </div>
        </div>
        <dl class="list list-tl">
        <dd class="item">
            <div class="item-detail b-bottom ui-flexbox ">
              <span class="item-title">申请人姓名</span>
              <span class="item-cont fr" id="userNam-box">
              <!--<input id="user-name" class="input" name="cust_name" type="text" maxlength="20" placeholder="申请人姓名" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">-->
              <input @change="userNameChange" @input="userNameInput" v-model="userName" id="user-name" class="input tr" name="cust_name" type="text" maxlength="20" readonly="readonly" placeholder="请输入申请人姓名">

              </span>
            </div>
        </dd><dd v-show="userNameErro != ''" class="item b-bottom item-erro">{{ userNameErro }}</dd>
        <dd class="item pr">
            <div class="item-detail b-bottom ui-flexbox ">
              <span class="item-title">身份证号</span>
              <span class="item-cont fr" id="userId-box">
                    <input v-model="userIdStr" readonly="readonly" class="input tr" name="id_no" type="tel" maxlength="22" placeholder="18位证件号,末位X以*代替">
              </span>
            </div>
            <InputPrompt v-show="this.showUserIdPrompt" v-bind:myMessage="userId" msgType="sfz"></InputPrompt>
        </dd><dd v-show="sfzErro != ''" class="item b-bottom item-erro">{{sfzErro}}</dd>
        <dd class="item pr">
          <div class="item-detail b-bottom ui-flexbox ">
            <span class="item-title">借记卡卡号</span>
            <span class="item-cont">
                <input @input="cardIdInput" @change="cardIdInputChange" @blur="cardIdBlur" @focus="cardIdFocus" v-model="cardId" class="input tr" type="tel" maxlength="22" name="citem-erroitCard"  placeholder="请输入借记卡卡号">
            </span>
          </div>
          <InputPrompt v-show="this.showCardIdPrompt" v-bind:myMessage="cardId" msgType="backCard"></InputPrompt>
        </dd><dd v-show="cardIdIErro != ''" class="item b-bottom item-erro">借记卡卡号格式错误！</dd>
        <dd class="item pr">
          <div class="item-detail b-bottom ui-flexbox ">
            <span class="item-title">手机号码</span>
            <span class="item-cont">
                <input @input="phoneInput" @change="phoneInputChange" @blur="phoneBlur" @focus="phoneFocus" v-model="phoneNo" type="tel" class="input tr" name="hp_no" maxlength="11" onkeypress="if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false" placeholder="请输入银行预留手机号">
            </span>
          </div>
          <InputPrompt v-show="this.showPhonePrompt" v-bind:myMessage="phoneNo" msgType="phone"></InputPrompt>
        </dd><dd v-show="phoneNumErro != ''" class="item b-bottom item-erro">手机号码错误！</dd>
        <dd class="item">
          <div class="item-detail b-bottom ui-flexbox ">
            <span class="item-title">验证码</span>
            <span class="item-cont pr100">
                <input @input="vcodeInput" @change="vcodeInputChange" v-model="vcode" class="input verify-box tr" name="verify_code" type="tel" maxlength="4" placeholder="请输入验证码">
              <a @click="verifyBtn" v-bind:class="{'disabled':noGetCode}" class="get-btn" href="javascript:;">{{xhqbtn}}</a>
            </span>
          </div>
        </dd><dd v-show="yzmErro != ''" class="item b-bottom item-erro">验证码错误！</dd>
      </dl>

      <div class="btn_box">
          <a href="javascript:;" @click="repayFuc" v-bind:class="{'weui-btn_disabled':noSubmit}" class="weui-btn weui-btn_primary">我要还款</a>
      </div>
    </div>
</template>

<script>
var cm = require("../components/common.js");
// 身份证正则表达式
var idRegExp = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
export default  {
    name: 'repayment',  // 组件贷款人还款
    data () {  // 数据
        return {
            msg: 'repayment',
            repayMoney:"",
            accrualDate:"",
            userName:"",
            userNameErro:"",
            userId:"",  // 身份证
            userIdStr:"",
            sfzErro:"",
            cardId:"",
            cardIdIErro:"",
            phoneNo:"",
            phoneNumErro:"",
            vcode:"",
            yzmErro:"",
            xhqbtn:"获取验证码",
            showUserIdPrompt:false,   //身份证输入提示
            showPhonePrompt:false,    //手机输入提示
            showCardIdPrompt:false,   //银行卡输入显示
            noSubmit:true,            //是否允许提交
            londDays:0,               //借款天数
            noGetCode:true,            //不允许发生验证码
            djs:120
        }
    },
    methods:{ // 自定义方法，可对data进行处理
        repayFuc() {  // 还款动作
            if(this.noSubmit){
                return;
            }
            this.$store.state.showLoading = true;
            var paraments = {
                openId:this.$store.state.openid,  //微信号
                tel:this.phoneNo,                         // 手机号
                idNo:this.userId,                         // 证件号码
                idType:"0",                               // 证件类型身份证
                amount:cm.delcommafy(this.$store.state.repayItem.borrowAmt),        // 借款本金
                repaymentAmount:cm.delcommafy(this.repayMoney),    // 还款金额
                accoutProp:"0",                           // 姓名
                accoutName:this.userName,                 // 银行卡户主姓名
                accoutNo:this.cardId,                     // 银行代码
                accoutType:"00",                          // 证件类型
                stageOrderId:this.$store.state.repayItem.orderId,  // 分期订单
                servlet_type:"repay_order",
                verify_code:this.vcode
            }
            var _this = this;
            $.post(XtsdAddOrderServlet,paraments,function(rpData) {
                _this.$store.state.showLoading = false;
                console.dir(rpData);
                if(rpData.tlt_trans_response && rpData.tlt_trans_response.resp_code != "0000"){
                    if(rpData.tlt_trans_response.resp_msg){
                        _this.$store.state.errorMsg = rpData.tlt_trans_response.resp_msg;
                    }else{
                        _this.$store.state.errorMsg = "还款失败";
                    }
                }else if(rpData.tlt_trans_response && rpData.tlt_trans_response.resp_code == "0000"){
                    location.hash = "#/RepayResult";
                }else if(rpData.error_response && rpData.error_response.sub_msg){
                    _this.$store.state.errorMsg = rpData.error_response.sub_msg.split(":")[1];
                }else if(rpData.error_response && rpData.error_response.resp_msg){
                    _this.$store.state.errorMsg = rpData.error_response.resp_msg;
                }else{
                    _this.$store.state.errorMsg = "还款失败";
                }
            });
        },
        changeNoSubmit(){
            var isUserId = idRegExp.test(this.userId);
            if (this.phoneNo.length == 11 && this.cardId.length > 12 && this.cardId.length < 20&& this.userName.length>1 && this.userName.length<10 && isUserId &&this.vcode.length == 4) {
                this.noSubmit = false;
            }else {
                this.noSubmit = true;
            }
        },
        userNameChange(){
            if(this.userName =="") {
                this.userNameErro = "请输入中文名"
            } else if(!cm.isCnName(this.userName)){
                this.userNameErro ="中文名字格式不符合要求"
            } else if(this.userName.length<2 || this.userName.length>10){
                this.userNameErro ="中文名长度不符合要求"
            }else{
                this.userNameErro = "";
            }
        },
        userNameInput(){
            if(this.userName !=""&& this.userName.length>1 && this.userName.length<10 && cm.isCnName(this.userName)){
                this.userNameErro = "";
            }
            this.changeNoSubmit();
        },
        "userIdInput": function(event) {
            this.userId = this.userId.replace(/\D/g, "X").replace(/[^0-9|X|x]/g, "");;
            if(idRegExp.test(this.userId)) {
                this.sfzErro = "";
            }
            this.changeNoSubmit();
        },
        "userIdChange": function() {

            if(this.userId ==""){
                this.sfzErro = "请输入身份证号";
            } else if(idRegExp.test(this.userId)) {
                this.sfzErro = "";
            }else{
                this.sfzErro = "身份证错误";
            }

        },
        "userIdBlur":function() {
            this.showUserIdPrompt = false;
        },
        "userIdFocus":function() {
            this.showUserIdPrompt = true;
        },
        "cardIdBlur":function() {
            this.showCardIdPrompt = false;
        },
        "cardIdFocus":function() {
             this.showCardIdPrompt = true;
        },
        "cardIdInput": function(event) {
            if (this.cardId.search(/\D/) != -1) {
                this.cardId = this.cardId.replace(/\D/g, "");
            }
            if (this.cardId.length > 12 && this.cardId.length < 20) {
                this.cardIdIErro = "";
            }

            this.changeNoSubmit();
        },
        "cardIdInputChange": function() {
            if (this.cardId.length < 13 || this.cardId.length > 19) {
                this.cardIdIErro = "信用卡号错误";
            }

        },

        "phoneBlur":function() {
            this.showPhonePrompt = false;
        },
        "phoneFocus":function() {
            this.showPhonePrompt = true;
        },
        "phoneInput": function(event) {
            if (this.phoneNo.search(/\D/) != -1) {
                this.phoneNo = this.phoneNo.replace(/\D/g, "");
            }
            if (this.phoneNo.length == 11) {
                if (this.djs == 120) {
                    this.noGetCode = false;
                }
                this.phoneNumErro = "";
            } else {
                this.noGetCode = true;
            }
            this.changeNoSubmit();
        },
        "phoneInputChange": function() {

            if (this.phoneNo.length != 11) {
                this.phoneNumErro = "电话号错误";
            } else {
                this.phoneNumErro = "";
            }
        },

        vcodeInput(){
            if (this.vcode.search(/\D/) != -1) {
                this.vcode = this.vcode.replace(/\D/g, "");
            }
            if (this.vcode.length == 4) {
                this.yzmErro = "";
            }
            this.changeNoSubmit();
        },
        vcodeInputChange(){
            if (this.vcode.length == 4) {
                this.yzmErro = "";
            } else {
                this.yzmErro = "请输入4位验证码";
            }
        },
        verifyBtn(){
            if(this.phoneNo.length == 11 && this.djs==120){

                var _this = this;
                this.xhqbtn = "重新获取(120S)";
                this.noGetCode = true;
                var vbhanbel = setInterval(function  () {
                   _this.djs--;
                   _this.xhqbtn = "重新获取("+_this.djs+"S)";
                   if(_this.djs <= 0){
                    clearInterval(vbhanbel);
                    _this.xhqbtn = "重新获取";
                    _this.djs = 120;
                    if(_this.phoneNo.length == 11){
                        _this.noGetCode = false;
                    }
                   }
                },1000)
                $.post(LFQSendSMSServlet,{
                    hp_no: this.phoneNo,
                    openid: this.$store.state.openid,
                    prdt_no: "0301"
                },function(smsg) {
                    console.dir(smsg);
                });
            }
        },
        countRepayment:function(DateDiff) {
            var coverChargeMoney = parseFloat(this.$store.state.repayItem.borrowAmt.replace(/,/gi, '')) * parseFloat(this.$store.state.coverCharge);  //服务费
            this.londDays = Math.ceil(DateDiff);
            var interest = parseFloat(this.$store.state.repayItem.dayRate) * this.londDays  * parseFloat(this.$store.state.repayItem.borrowAmt.replace(/,/gi, ''))/100; // 利息
            this.repayMoney = cm.comdify((interest + parseFloat(this.$store.state.repayItem.borrowAmt.replace(/,/gi, '')) +0.0000001).toFixed(2));
            this.userName = this.$store.state.repayItem.custName;
            this.userId = this.$store.state.repayItem.idNo.replace("~","");;
            this.userIdStr = this.userId.replace(/(\d{3})(\d{11})/,'$1****');
            if(this.userId.length == 14){
                this.userIdStr = this.userId.replace(/(\d{3})(\d{7})/,'$1****');
            }

        }
    },
    beforeMount:function  () {
        var accrualDateObject = new Date(this.$store.state.repayItem.serialNoTime.replace(/-/g, "/"));
        this.accrualDate = this.$store.state.repayItem.serialNoTime.split(" ")[0];
        accrualDateObject.setHours(0);
        var theNow = new Date(this.$store.state.nowDate);
        theNow.setHours(23);
        var DateDiff = cm.DateDiff(accrualDateObject,theNow);
        console.log("DateDiff....." + DateDiff);
        this.countRepayment(DateDiff);
    }
}
</script>

<style lang='scss' scoped>
@import "../assets/scss/_form-list.scss";
.info-title{
    color: #666;

    padding-top: 15px;
    img{
        width: 20px;
        height: 20px;
        margin-right: 12px;
        vertical-align: sub;
    }
}
.repayInfo{
    background-color: #fff;
    padding: 0 15px;
    .info-num{
        padding-left: 32px;
        line-height: 50px;
        font-size: 30px;
    }
}
.info-num{
    font-family: helvetica;
    color: #222;
}
.list-tl{
    .get-btn{
        right: 0;
    }
    .pr100{
        padding-right: 120px;
    }
}
.pr{
    position: relative;
}
.item-cont{
    input{
        font-size: 17px;
    }
}
.list-tl .get-btn.disabled{
    color: #ccc;
    border-color: #ccc;
}
</style>
